<script setup lang="ts">
import { FormTypeEnum, TASK_MODE } from "@/constants/other-keys"
import TaskForm from "../component/task-form.vue"
import TaskStatus from "../component/task-status.vue"
import TaskFile from "../component/task-file.vue"
import { onMounted, ref, watch } from "vue"
import { useRoute } from "vue-router"
import { getTaskInfoApi } from "@/api/task"
import { TaskConfig } from "@/api/task/types/static-task"

defineOptions({
  // 命名当前组件
  name: "StaticTaskView"
})
const TaskStatusRef = ref()
const tabValue = ref<string>("basic")
const route = useRoute()
const taskId = ref<string>(route.query.id as string)
const taskMode = ref<TASK_MODE | undefined>()

watch(
  () => TaskStatusRef.value,
  () => {
    if (tabValue.value == "status") TaskStatusRef.value.resize()
  }
)

const getTaskInfo = () => {
  getTaskInfoApi(taskId.value).then(({ data }) => {
    taskMode.value = (JSON.parse(data.task_param).task_config as TaskConfig).mode
  })
}

onMounted(() => {
  getTaskInfo()
})
</script>
<template>
  <div class="app-container">
    <el-card never>
      <el-tabs v-model="tabValue" type="card" class="demo-tabs">
        <el-tab-pane label="基本信息" name="basic">
          <component :is="TaskForm" :form-type="FormTypeEnum.VIEW" />
        </el-tab-pane>
        <el-tab-pane label="任务状态" name="status">
          <component v-if="tabValue == 'status'" ref="TaskStatusRef" :is="TaskStatus" :form-type="FormTypeEnum.VIEW" />
        </el-tab-pane>
        <el-tab-pane v-if="taskMode == 'Train'" label="任务文件" name="file">
          <component v-if="tabValue == 'file'" :id="taskId" :is="TaskFile" />
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>
